<div class="side-menu">
  <div class="menu-items">
    <h6 class="white-text center-align top-title">SIDEQUEST OFFICIAL<div class="apps-title"></div></h6>
    <div class="menu-item" >
      <div class="menu-item-inner menu no-outline" mz-tooltip position="right"
           tooltip="Official VR Games for Go and Quest." (click)="openCategory(1)">
        <img class="menu-icon" src="https://the-expanse.github.io/SideQuestRepos/vr-games/icons/vrgames.png" /><br />
        <span class="menu-name">Games</span>
      </div>
    </div>
    <div class="menu-item" >
      <div class="menu-item-inner menu no-outline" mz-tooltip position="right"
           tooltip="Official VR Apps for Go and Quest." (click)="openCategory(2)">
        <img class="menu-icon" src="https://the-expanse.github.io/SideQuestRepos/vr-apps/icons/vrapps.png" /><br />
        <span class="menu-name">Apps</span>
      </div>
    </div>
    <div class="menu-item">
      <div class="menu-item-inner menu no-outline" mz-tooltip position="right"
           tooltip="VR Mods for Go and Quest." (click)="openCategory(4)">
        <img class="menu-icon" src="https://the-expanse.github.io/SideQuestRepos/android-games/icons/games.png" /><br />
        <span class="menu-name">Mods</span>
      </div>
    </div>
    <div class="menu-item" *ngIf="!appService.hideNSFW">
      <div class="menu-item-inner menu no-outline" mz-tooltip position="right"
           tooltip="NSFW Apps for Go and Quest." (click)="openCategory(3)">
        <img class="menu-icon" src="https://the-expanse.github.io/SideQuestRepos/nsfw/icons/nsfw.png" /><br />
        <span class="menu-name">NSFW</span>
      </div>
    </div>
    <br>
    <h6 class="white-text center-align top-title" *ngIf="repoService.repos && repoService.repos.length">3RD PARTY<div class="apps-title"></div></h6>
    <div class="menu-item" *ngFor="let repo of repoService.repos; let i = index" >
      <div class="menu-item-inner menu no-outline side-sub-menu" mz-tooltip position="right"
           tooltip="{{repo.body.repo.description}}" routerLink="/apps/{{i}}">
        <div class="row no-margin" >
          <div class="col s4 no-padding">
            <img class="fixed-menu-icon" src="{{repo.icon}}" />
          </div>
          <div class="col s8 no-padding icon-text truncate">{{repo.name}}</div>
        </div>
      </div>
    </div>
  </div>
  <div class="menu-item-beat">
    <div
      class="menu-item-inner beat-menu side-sub-menu" routerLink="/webview"
      mz-tooltip
      position="right"
      tooltip="Browse the web to download songs, APK files and find info on new releases and upcoming events."
    >

      <div class="row no-margin" >
        <div class="col s4 no-padding">
          <i class="material-icons fixed-menu-icon">public</i>
        </div>
        <div class="col s8 no-padding icon-text">Web</div>
      </div>
      <!--<i class="material-icons browser-icon">public</i><br />-->
      <!--<span class="menu-name">Browser</span>-->
    </div>
  </div>

  <div class="menu-item-repo" >
    <div
      class="menu-item-inner add-menu side-sub-menu" mz-tooltip routerLink="/tasks"
      position="right"
      tooltip="Manage the app tasks."
    >
      <div class="row no-margin" >
        <div class="col s4 no-padding">
          <i class="material-icons fixed-menu-icon">playlist_add_check</i>
        </div>
        <div class="col s8 no-padding icon-text truncate">{{processService.left_length ? processService.left_length : 'No'}} Tasks</div>
      </div>
    </div>
  </div>
  <div class="menu-item-files" >
    <div
      class="menu-item-inner side-sub-menu" mz-tooltip routerLink="/device-files"
      position="right"
      tooltip="Manage files on the device."
    >
      <div class="row no-margin" >
        <div class="col s4 no-padding">
          <i class="material-icons fixed-menu-icon">folder</i>
        </div>
        <div class="col s8 no-padding icon-text truncate">File Explorer</div>
      </div>
    </div>
  </div>

  <div class="menu-item-video">
    <div
      class="menu-item-inner video-menu side-sub-menu"
      mz-tooltip
      position="right"
      tooltip="Installed apps on your headset"
      routerLink="/packages"
    >
      <div class="row no-margin">
        <div class="col s4 no-padding">
          <i class="material-icons fixed-menu-icon"
          >apps</i
          >
        </div>
        <div class="col s8 no-padding icon-text truncate">My Apps</div>
      </div>
    </div>
  </div>
  <div class="menu-item-setup" >
    <div
      class="menu-item-inner setup-menu side-sub-menu"
      mz-tooltip
      position="right" routerLink="/tools"
      tooltip="Tools and device settings and options."
    >
      <div class="row no-margin">
        <div class="col s4 no-padding">
          <i class="material-icons fixed-menu-icon"
          >build</i>
        </div>
        <div class="col s8 no-padding icon-text truncate">Settings</div>
      </div>
    </div>
  </div>
  <div id="connection-ip-address"></div>
  <a id="enable-wifi" href="#" class="waves-effect waves-light btn"
  >Wifi Mode</a
  >
</div>

<mz-modal #videoModal [fixedFooter]="true">
  <mz-modal-header>
    <h4>How To Video</h4>
  </mz-modal-header>
  <mz-modal-content>
    <iframe
      width="655.609756097561"
      height="420"
      style="width: 100%;"
      src="https://www.youtube.com/embed/HspVa4i9rPg"
      frameborder="0"
      allowfullscreen
    ></iframe>
    <br />Kindly provided by
    <app-link url="https://www.youtube.com/user/RaMarcus" text="RaMarcus" [isDark]="true"></app-link>
  </mz-modal-content>
  <mz-modal-footer>
    <button mz-button [flat]="true" mz-modal-close>Close</button>
  </mz-modal-footer>
</mz-modal>
